@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tabs';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

@mixin increasedClickArea($gap) {
  &::after {
    content: ' ';

    position: absolute;
    top: 0;
    right: calc(#{$gap} / -2);
    bottom: 0;
    left: calc(#{$gap} / -2);
  }
}

$types: 'primary', 'secondary';

.tab {
  cursor: pointer;

  position: relative;

  display: inline-flex;
  flex-direction: row;
  align-items: center;

  padding: 0;

  color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');

  background-color: transparent;
  border-width: 0;
  outline: none;

  @each $type in $types {
    &[data-type=#{$type}] {
      @include composite-var($tabs, 'tab-button-#{$type}', 'height');
      @include increasedClickArea(simple-var($theme-variables, 'space', 'tabs', $type, 'gap'));
      & .container {
        @include composite-var($tabs, 'tab-button-#{$type}', 'container');
      }
    }
  }

  &[data-selected=true],
  &:focus-visible,
  &:hover {
    color: simple-var($theme-variables, 'sys', 'neutral', 'text-main');
  }

  &:disabled {
    cursor: not-allowed;
    color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
  }

  & .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:focus-visible {
    & .container {
      @include outline-var($container-focused-s);

      outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
    }
    &[data-selected=true] .container {
      outline-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
    }
  }
}
